<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			#btn{
				text-align: center;
			}
			#btn input{
				width: 200px;
				height: 50px;
			}
			#pic{
				width: 400px;
				display: block;
				margin: 0 auto;
			}
		</style>
		<script type="text/javascript">
				window.onload = function(){
					//1.抓元素
					var start = document.getElementById("start");
					var end = document.getElementById("end");
					var pic = document.getElementById("pic");
					var arr = ['images/angelababy.jpg','images/liudehua.jpg','images/youting.jpg','images/xiexiehuigu.jpg','images/meinv2.jpg','images/zhishengji.jpg','images/qian.jpg','images/quanzhilong.jpeg','images/bujiadi.jpg','images/liuyifei.jpg'];
					var timer;
					//2.点击开始的事件
					start.onclick = function(){
						//6.清除定时器 解决bug
						clearInterval(timer);
						//3.定时器
						timer = setInterval(function(){
							var num = Math.floor(Math.random()*arr.length);
						pic.setAttribute('src',arr[num]);
						},150)
					}
					
					//4.点击停止的事件
					end.onclick = function(){
						//5.清除定时器
						clearInterval(timer);
						//7.奸商行为
						var num = Math.floor(Math.random()*10);
						if(num<6){
							pic.setAttribute('src','images/xiexiehuigu.jpg');
						}
					}
				}
		</script>
	</head>
	<body>
		<div id="btn">
			<input type="button" value="开始抽奖"  id="start"/>
			<input type="button" value="结束抽奖"  id="end"/>
		</div>
		<br /><br />
		<img src="images/start.png" id="pic"/>
	</body>
</html>
